<!-- 一键解隔离详情 -->
<script setup lang="ts">
import { onMounted, computed, ref } from "vue";
import { detail } from "@/api/erc/detector";
import EditDropDownLight from "@/views/all/equip/components/EditDropDownLight.vue";
import BaseInfo from "./components/BaseInfo.vue";
import SectionTitle from "./components/SectionTitle.vue";
import Empty from "./components/Empty.vue";
import LogInfo from "./components/LogInfo.vue";
import { GL_CODES, JGL_CODES, finishtableColumns, gltableColumns, jgltableColumns, tagColorList, tagBgColorList, tagBorderColorList } from "./const";

const props = defineProps(["currentData"]);
const pageName = defineModel();
const source = defineModel("source");

const tableColumns = computed(() => {
  if (isGL.value) {
    return gltableColumns;
  }
  if (isJGL.value) {
    return jgltableColumns;
  }
  return finishtableColumns;
});
const data = ref<any>({});
const isGL = computed(() => GL_CODES.includes(data.value?.taskStatusKey));
const isJGL = computed(() => JGL_CODES.includes(data.value?.taskStatusKey));
const isFinish = computed(() => data.value?.taskStatusKey === "FINISH");
// 页面本身的值
const logVisible = ref(false);
const logData = ref();
const handleDownload = row => {
  logData.value = row;
  logVisible.value = true;
};
onMounted(() => {
  const { id } = props?.currentData;
  detail({ id }).then(res => {
    data.value = res;
  });
});
// 隔离解隔离
const handleClick = () => {
  source.value = "detail";
  pageName.value = "edit";
};
// 返回列表页
const handleBack = () => {
  source.value = "list";
  pageName.value = "list";
};
const getHandleType = type => {
  if (type === "AUTO") {
    return "自动";
  }
  if (type === "HAND") {
    return "手动";
  }
  return "-";
};
const getStatus = val => {
  if (val === "true") {
    return "隔离";
  }
  if (val === "false") {
    return "未隔离";
  }
  return val || "-";
};
</script>
<template>
  <div class="view-equip-detail view-detail">
    <div class="view-detail-header">
      <div class="view-title">
        <px-button type="primary" icon="ArrowLeft" @click="handleBack">返回</px-button>
        <div class="title">隔离工单详情</div>
        <p
          class="status"
          :style="{
            color: `${tagColorList[data.taskStatusKeyDesc]}`,
            border: `1px solid ${tagBorderColorList[data.taskStatusKeyDesc]}`,
            backgroundColor: `${tagBgColorList[data.taskStatusKeyDesc]}`
          }"
        >
          <span>{{ data.taskStatusKeyDesc }}</span>
        </p>
      </div>
      <div>
        <px-button :disabled="!isJGL" v-has="'ERC_CALENDAR_DETECTOR_CANCEL_BTN'" type="primary" plain @click="handleClick">一键解隔离</px-button>
        <px-button :disabled="!isGL" v-has="'ERC_CALENDAR_DETECTOR_TODO_BTN'" type="primary" @click="handleClick">一键隔离</px-button>
      </div>
    </div>
    <px-scrollbar class="view-detail-body">
      <div>
        <BaseInfo :data="data" />
        <EditDropDownLight dropdownTitle="侦测器隔离清单">
          <template v-slot:content>
            <div class="table-box">
              <px-table
                :data="data?.detectorChecklistDTOList || []"
                :max-height="data?.detectorChecklistDTOList?.length ? '395px' : undefined"
                class="equip-table"
                size="small"
                border
              >
                <px-table-column label="序号" type="index" width="55" align="center" fixed="left" />
                <px-table-column
                  v-for="(item, index) in tableColumns"
                  :label="item.label"
                  :min-width="item.minWidth"
                  :show-overflow-tooltip="item.showOverflowTooltip"
                  :fixed="item.fixed"
                  :key="index"
                >
                  <template #default="scope" v-if="item.prop === 'isolateFileDTO'">
                    <px-button
                      v-if="scope.row['isolateFileDTO']"
                      v-has="'ERC_CALENDAR_DETECTOR_DOWNLOAD_FILE'"
                      link
                      type="primary"
                      @click="handleDownload(scope.row['isolateFileDTO'])"
                      >下载日志</px-button
                    >
                    <span v-else>-</span>
                  </template>
                  <template #default="scope" v-else-if="item.prop === 'disisolateFileDTO'">
                    <px-button
                      v-if="scope.row['disisolateFileDTO']"
                      v-has="'ERC_CALENDAR_DETECTOR_DOWNLOAD_FILE'"
                      link
                      type="primary"
                      @click="handleDownload(scope.row['disisolateFileDTO'])"
                      >下载日志</px-button
                    >
                    <span v-else>-</span>
                  </template>
                  <template #default="scope" v-else-if="item.prop === 'isolateType' || item.prop === 'disisolateType'">{{
                    getHandleType(scope.row[item.prop])
                  }}</template>
                  <template #default="scope" v-else-if="['isolateBeforeStatus', 'isolateAfterStatus'].includes(item.prop)">
                    <px-tag v-if="scope.row[item.prop] === 'true'" type="success" class="mx-1" effect="dark"> 隔离 </px-tag>
                    <px-tag v-else class="mx-1" type="danger" effect="dark"> 未隔离 </px-tag>
                  </template>
                  <template #default="scope" v-else-if="['disisolateBeforeStatus', 'disisolateAfterStatus'].includes(item.prop)">
                    <px-tag v-if="scope.row[item.prop] === 'true'" type="danger" class="mx-1" effect="dark"> 隔离 </px-tag>
                    <px-tag v-else class="mx-1" type="success" effect="dark"> 未隔离 </px-tag>
                  </template>
                  <template #default="scope" v-else>{{
                    scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
                  }}</template>
                </px-table-column>
              </px-table>
            </div>
          </template>
        </EditDropDownLight>
        <EditDropDownLight v-show="data?.workOrderNo" dropdownTitle="侦测器隔离备注">
          <template v-slot:content>
            <Empty v-if="isGL"></Empty>
            <div v-if="!isGL">
              <SectionTitle name="隔离备注" />
              <div v-if="data?.isolationSubTaskDTO?.executeRemark">
                <!-- <FileUpload class="mt-[16px]" :multiple="false" fileType="view" :fileList="data?.isolationSubTaskDTO?.fileIdList" /> -->
                <p class="remark">{{ data?.isolationSubTaskDTO?.executeRemark }}</p>
              </div>
              <Empty v-else></Empty>
            </div>
            <div v-if="isFinish">
              <SectionTitle name="解隔离备注" />
              <div v-if="data?.disIsolationSubTaskDTO?.executeRemark">
                <!-- <FileUpload class="mt-[16px]" :multiple="false" fileType="view" :fileList="data?.disIsolationSubTaskDTO?.fileIdList" /> -->
                <p class="remark">{{ data?.disIsolationSubTaskDTO?.executeRemark }}</p>
              </div>
              <Empty v-else></Empty>
            </div>
          </template>
        </EditDropDownLight>
      </div>
    </px-scrollbar>
    <LogInfo v-if="logVisible" v-model="logVisible" :data="logData" />
  </div>
</template>
<style lang="scss" scoped>
@import url("@/views/erc/scss/view-detail.scss");
.view-detail {
  padding: 16px 24px;
  background-color: #fff;
  border-radius: 4px;
  height: calc(100vh - 126px);
  .view-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
  }
  .view-title {
    display: flex;
    align-items: center;
  }
  .title {
    font-size: 20px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.9);
    line-height: 32px;
    margin-left: 16px;
  }
  .status {
    display: flex;
    align-items: center;
    margin-left: 8px;
  }
  .table-box {
    position: relative;
  }
  .remark {
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.8);
    line-height: 22px;
    margin-top: 8px;
  }
  .point {
    border-radius: 50%;
    height: 10px;
    width: 10px;
    margin-right: 6px;
  }
}
.status {
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 3px 10px;
  font-size: 12px;
  line-height: 22px;
  border-radius: 4px;
}
.view-detail-body {
  height: calc(100vh - 204px);
}
</style>
